<template>
<div class="search">
 <nav class="searchList-nav" ref="change">
   <span :class="{isActive:currentView=='SearchSong'}" @click="handleChangeView('SearchSong')">歌曲</span>
   <span :class="{isActive:currentView=='SearchSongLists'}" @click="handleChangeView('SearchSongLists')">歌单</span>
 </nav>
  <component :is="currentView"></component>
</div>
</template>

<script>
import SearchSong from "@/components/SearchSong";
import SearchSongLists from "@/components/SearchSongLists";
export default {
  name: "Search",
  components:{
    SearchSong,SearchSongLists
  },
  data(){
    return{
      currentView:'SearchSong'
    }
  },
  methods:{
    //切换组件
    handleChangeView(component){
      this.currentView=component
    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/css/search";
</style>
